<template>
	<breadCrumb ref="breadCrumb" :item="item"></breadCrumb>
	<div class="table-wrapped">
		<!-- 顶部 -->
		<div class="table-top">
			<!-- 表格顶部 -->
			<div class="table-header">
				<div class="left-wrapped">
					<div class="search-wrapped">
						<el-input v-model="adminAccount" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
							:prefix-icon="Search" @change="searchuser()" />
					</div>
					<div class="select-wrapped">
						<el-select v-model="department" placeholder="请选择部门" style="width: 200px" clearable
							@change="searchForDepartment" @clear="clearOperation">
							<el-option v-for="item in departmentData" :key="item" :label="item" :value="item" />
						</el-select>
					</div>
				</div>
				<div class="button-wrapped">
					<el-button plain type="primary" @click="banUserList">筛选冻结用户</el-button>
					<el-button plain type="primary" @click="getAdmimlist">显示全部用户</el-button>
				</div>
			</div>
			<!-- 表格内容 -->
			<div class="table-content">
				<el-table :data="tableData" style="width: 100%" border>
					<el-table-column type="index" width="50" />
					<el-table-column prop="account" label="账号" />
					<el-table-column prop="name" label="姓名" />
					<el-table-column prop="sex" label="性别" />
					<el-table-column prop="identity" label="身份" />
					<el-table-column prop="department" label="部门" />
					<el-table-column prop="email" label="邮箱" />
					<el-table-column prop="status" label="状态">
						<template #default="{row}">
							<div>
								<el-tag type="success" v-if="row.status == '0'">正常</el-tag>
								<el-tag type="primary" v-else>冻结</el-tag>

							</div>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间">
						<template #default="{row}">
							<div>{{row.create_time?.slice(0,10)}}</div>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="update_time" label="更新时间">
						<template #default="{row}">
							<div>{{row.update_time?.slice(0,10)}}</div>
						</template>
					</el-table-column> -->
					<el-table-column label="操作" width="200px">
						<template #default="{row}">
							<div>
								<el-button type="primary" @click="banuser(row.id)">冻结</el-button>
								<el-button type="success" @click="hotuser(row.id)">解冻</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 底部 -->
		<div class="table-footer">
			<el-pagination :page-size="1" :current-page="paginationData.currentPage" :pager-count="7"
				:page-count="paginationData.pageCount" layout="prev, pager, next" :total="adminTotal"
				@current-change="currentChange" />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive, toRaw } from 'vue';
	import { Search } from '@element-plus/icons-vue'
	import breadCrumb from '@/components/bread_crumb.vue'
	import { bus } from "@/utils/mitt.js"
	import { searchUser, searchByDepartment, getAdminListLength, returnListData, getBanList, banUser, hotUser } from '@/api/userinfo.js'
	import { getDepartment } from '@/api/setting.js';
	import { async } from 'fast-glob';
	import { ElMessage } from 'element-plus';



	const breadcrumb = ref()

	const item = ref({
		first: '用户列表',
	})
	// 搜索框的数据
	const adminAccount = ref<number>()

	// 表格内容
	const tableData = ref([])

	// 通过账号进行搜索
	const searchuser = async () => {
		const res = await searchUser(adminAccount.value)
		tableData.value = res.result
	}

	// 部门数据
	const departmentData = ref([])
	const getdepartment = async () => {
		departmentData.value = await getDepartment()
		// console.log(departmentData.value)
	}
	getdepartment()

	// 通过部门搜索
	const department = ref()
	const searchForDepartment = async () => {
		// tableData.value = await searchByDepartment(department.value)
		tableData.value = toRaw(await searchByDepartment(department.value))
		console.log(tableData.value)
	}
	// 清空
	const clearOperation = () => {
		getFirstPageList()
	}

	const paginationData = reactive({
		// 总页数
		pageCount: 1,
		// 当前页
		currentPage: 1
	})

	const adminTotal = ref<number>(0)

	// 获取y用户的数量
	const getAdminListlength = async () => {
		const res = await getAdminListLength('用户')
		adminTotal.value = res.length
		paginationData.pageCount = Math.ceil(res.length / 10)
	}
	getAdminListlength()

	// 默认获取第一页的数据
	const getFirstPageList = async () => {
		tableData.value = await returnListData(0, '用户')
	}
	getFirstPageList()

	// 监听换页
	const currentChange = async (value : number) => {
		tableData.value = await returnListData(value - 1, '用户')
		paginationData.currentPage = value
	}

	// 获取用户列表
	const getAdmimlist = () => {
		getFirstPageList()
	}
	getAdmimlist()
	// 筛选冻结用户
	const banUserList = async () => {
		tableData.value = await getBanList()
	}

	const banuser = async (id : number) => {
		const res = await banUser(id)
		if (res.status == 0) {
			ElMessage({
				message: '冻结用户成功',
				type: 'success',
			})
		} else {
			ElMessage.error('冻结用户失败')
		}
	}

	const hotuser = async (id : number) => {
		const res = await hotUser(id)
		if (res.status == 0) {
			ElMessage({
				message: '解冻用户成功',
				type: 'success',
			})
		} else {
			ElMessage.error('解冻用户失败')
		}
	}



	// 创建管理员
	// const Create = ref()
	// const openCreate = (id : number) => {
	// 	bus.emit('createId', id)
	// 	Create.value.open()
	// }
	// // 编辑管理员
	// const Edit = ref()
	// const openEdit = (id : number) => {
	// 	bus.emit('editId', id)
	// 	Edit.value.open()
	// }

	// // 降级管理员 openDelete
	// const Delete = ref()
	// const openDelete = (id : number) => {
	// 	bus.emit('deleteId', id)
	// 	Delete.value.open()
	// }
</script>

<style lang="scss" scoped>
	.table-wrapped {
		padding: 8px;
		height: calc(100vh - 101px);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.table-top {
			.table-header {
				padding: 0 24px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 48px;
				background: #fff;

			}
		}

		.table-footer {
			display: flex;
			justify-content: flex-end;
		}
	}

	:deep(.el-input__wrapper) {
		height: 32px;
		padding: 0 15px;
	}

	:deep(.el-select__wrapper) {
		height: 32px;
		padding: 0 15px;
	}
</style>